<template>
  <div>
    <!-- <div class="toptitle">组织编码</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <div class="block" style="margin-bottom: 1.25rem;">
        <span class="demonstration" style="    text-align: right;
    float: left;
    font-size: 12px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;">选择时间</span>
    <br><br>

    <el-date-picker
       v-model="value4"
       type="daterange"
       align="right"
       unlink-panels
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
       value-format="yyyy-MM-dd"
       :picker-options="pickerOptions2">
     </el-date-picker>

       <!-- <el-date-picker v-model="value4" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions2"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
        </el-date-picker> -->
      </div>
      <el-form-item style="margin-left:950px;text-align:right;margin-top:10px;margin-bottom:20px">
        <el-button type="primary" @click="searchData()" size="mini" icon="el-icon-search">查询</el-button>

        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">重置</el-button>

        <el-button type="success" @click="exportExcel()" size="mini" icon="el-icon-s-data">导出</el-button>
      </el-form-item>

    </el-form>
    <el-table :data="tableData" :header-cell-style="{background:'#eef1f6',color:'#606266'}" style="width: 100%;margin-bottom: 20px;"
      row-key="goodsTypeId" border v-loading="loading"
      default-expand-all @sort-change="handleSort">
      <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
      <el-table-column prop="goodsName" label="商品名称"  align="center"></el-table-column>

      <el-table-column prop="paymentStoreCount" label="付款店铺数量（家）" align="center"  sortable="paymentStoreCount">
        <template slot="header" slot-scope="scope">
          <span>付款店铺数量（家）
            <el-popover placement="top-start" width="200" trigger="hover" content="含有XX商品已付款订单的店铺数量">
              <el-button slot="reference" @click.stop  style="padding:0;border:0"><i class="el-icon-question"></i></el-button>
            </el-popover>
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="storeCount" label="店铺总数量（家）"  align="center">
        <template slot="header" slot-scope="scope">
          <span>店铺总数量（家）
            <el-popover placement="top-start" width="200" trigger="hover" content="云店店铺总数量">
              <el-button slot="reference" @click.stop  style="padding:0;border:0"><i class="el-icon-question"></i></el-button>
            </el-popover>
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="goodsCoverageProportion" label="商品覆盖率（%）" align="center">
        <template slot="header" slot-scope="scope">
          <span>商品覆盖率（%）
            <el-popover placement="top-start" width="200" trigger="hover" content="含有XX商品已付款订单店数量/云店店铺总数量*100％">
              <el-button slot="reference"  @click.stop  style="padding:0;border:0"><i class="el-icon-question"></i></el-button>
            </el-popover>
          </span>
        </template>
      </el-table-column>

    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.current"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import {
    queryGoodBazaarStatemt,
    exportGoodBazaarStatemt
  } from "@/api/goodMarketSituationStatement";
  import qs from "qs";
  export default {
    data() {
      return {
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value4: [],
        headers: {
          token: localStorage.getItem("token"), //从cookie里获取token，并赋值  Authorization ，而不是token
        },
        tableData: [],
        listQuery: {
          current: 1,
          size: 10
        },
        logininfo: "",
        orgList: "",
        formInline: {
          ascs: [],
          descs: []
        },
        loading: false,
        total: 0,

      };
    },
    mounted() {
      this.logininfo = localStorage.getItem("logininfo");
      this.orgList = JSON.parse(this.logininfo).orgList;
      this.search();
    },
    methods: {

      //排序
      handleSort(val) {
        //排序之前将页码重置为1
        this.listQuery.current = 1;
        this.formInline.descs = [];
        this.formInline.ascs = [];
        let sortModel = "";
        if (val.order === "ascending") {
          sortModel = "ASC";
          this.formInline.ascs = [val.column.sortable];
          this.formInline.descs = [];
          this.search();
        } else if (val.order === "descending") {
          sortModel = "DESC";
          this.formInline.ascs = [];
          this.formInline.descs = [val.column.sortable];
          this.search();
        }
      },
      // 重置页码查询 查询
      searchData() {
        this.listQuery.current = 1;
        this.search();
      },
      //查询
      search() {
        this.loading = true;
        let data = {
          size: this.listQuery.size,
          current: this.listQuery.current,
          condition: {
            startTime: !this.value4? "":this.value4.length == 0 ? "" : this.value4[0]+" 00:00:00",
            endTime: !this.value4? "":this.value4.length == 0 ? "" : this.value4[1]+" 23:59:59",
            orgSeq: this.orgList[0].orgSeq
          },
          ascs: this.formInline.ascs,
          descs: this.formInline.descs
        };
        queryGoodBazaarStatemt(data).then(res => {
          this.total = res.total;
          this.tableData = res.records;
          this.loading = false;
        });
      },
      handleCurrentChange(val) {
        this.listQuery.current = val;
        this.search();
      },
      handleSizeChange(val) {
        this.listQuery.size = val;
        this.search();
      },
      //导出
      exportExcel() {
        let data = {
          size: this.listQuery.size,
          current: this.listQuery.current,
          condition: {
            startTime: !this.value4? "":this.value4.length == 0 ? "" : this.value4[0]+" 00:00:00",
            endTime: !this.value4? "":this.value4.length == 0 ? "" : this.value4[1]+" 23:59:59",
            orgSeq: this.orgList[0].orgSeq
          },
          ascs: this.formInline.ascs,
          descs: this.formInline.descs
        }
        exportGoodBazaarStatemt(data)
          .then(res => {
            const link = document.createElement("a");
            let blob = new Blob([res], {
              type: "application/vnd.ms-excel"
            });
            link.style.display = "none";
            //设置连接
            link.href = URL.createObjectURL(blob);
            link.download = "商品市场动销概况报表（" + this.orgList[0].orgName + "）.xlsx";
            document.body.appendChild(link);
            //模拟点击事件
            link.click();
          })
          .catch(err => {
            console.log(err);
          });
      },
      kong(){
        this.value4 = "";
      }
    }
  };
</script>
<style lang="less" scoped>
  .toptitle {
    border: 1px solid #e0e0e0;
    border-bottom: 2px solid #188097;
    background: #f5f5f5;
    line-height: 35px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
  }

  .el-form-item .el-select {
    width: 100%;
  }
</style>
